body {
    padding-left: 100px;
    padding-bottom: 100px;
}

/* 椭圆 */
.ellipse {
    width: 200px;
    height: 100px;
    background: #fb3;
    border-radius: 50%;
}

/* 半椭圆 */
.half-ellipse {
    width: 200px;
    height: 100px;
    background: #fb3;
    /*border-radius: 10px 10px / 5px 20px;*/
    /*border-top-right-radius: 50px 100px;*/
    /*border-radius: 200px / 100px;*/
    /*border-radius: 50% / 100% 100% 0 0;*/
    border-radius: 50% / 0 0 100% 100%;
}

/* 四分之一椭圆 */
.quarter-ellipse {
    width: 200px;
    height: 100px;
    background: #fb3;
    border-radius: 0 100% 0 0;
}

/* 平行四边形-伪元素方法 */
.parallelograms-pseudo {
    width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: white;
    position: relative;
    /*background: #5588aa;*/
}

.parallelograms-pseudo::after {
    position: absolute;
    content: '';
    inset: 0 0 0 0;
    z-index: -1;
    background: #5588aa;
    transform: skew(-30deg);
}

/* 菱形-基于变形的方案 */
.diamond-images {
    display: inline-block;
    width: 100px;
    height: 100px;
    transform: rotateZ(45deg);
    overflow: hidden;
}

.diamond-images > img {
    max-width: 100%;
    transform: rotateZ(-45deg) scale(1.42);
}

/* 裁切路径方案 */
.diamond-clip {
    width: 100px;
    height: 100px;
    clip-path: polygon(50% 0, 0 50%, 50% 100%, 100% 50%);
}

.diamond-clip:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}


.bevel-corners-gradients {
    background: linear-gradient(-45deg, transparent 15px, skyblue 0) bottom right,
    linear-gradient(45deg, transparent 15px, skyblue 0) bottom left,
    linear-gradient(-135deg, transparent 15px, skyblue 0) top right,
    linear-gradient(135deg, transparent 15px, skyblue 0) top left;
}

/* 切角、基于渐变 */
.bevel-corners-gradients {
    width: 200px;
    height: 100px;
    /*background: #58a;*/
    /*background: linear-gradient(-45deg, transparent 15px, #58a 0);*/
    /*background: linear-gradient(-45deg, transparent 15px, #58a 0) right no-repeat,*/
    /*linear-gradient(45deg, transparent 15px, #58a 0) left no-repeat;*/
    /*background-size: 50% 100%;*/
    /*background: linear-gradient(0, skyblue 50%, rebeccapurple 0);*/
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

/* 弧形切角 */
.scoop-corners {
    width: 200px;
    height: 100px;
    background: #58a;
    background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
    radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

/* 裁切路径方案 */
.bevel-corners-clipped {
    width: 200px;
    height: 100px;
    background: skyblue;
    clip-path: polygon(0 15px, 15px 0,
    calc(100% - 15px) 0, 100% 15px,
    100% calc(100% - 15px), calc(100% - 15px) 100%,
    15px 100%, 0 calc(100% - 15px));
}

/* 梯形，伪元素+rotateX方案 */
.trapezoid-tabs-rotate-x {
    width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: white;
    font-size: 20px;
    font-weight: bold;
}

.trapezoid-tabs-rotate-x::after {
    position: absolute;
    inset: 0 0 0 0;
    content: '';
    z-index: -1;
    background: skyblue;
    transform: perspective(80px) rotateX(5deg) scaleY(1.1);
    transform-origin: bottom;
    border-radius: 10px;
}

/* 饼图：简单实现 */
.pie-animated {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: yellowgreen;
    background-image: linear-gradient(90deg, transparent 50%, #655 0);
    overflow: hidden;
}

.pie-animated::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    background-color: inherit;
    transform-origin: 0 50%;
    /*transform: rotateZ(0.25turn);*/
    /*background: #655;*/
    /*transform: rotateZ(0.1turn);*/
    animation: spin 3s linear infinite, bg 6s step-end infinite;
}

@keyframes spin {
    to {
        transform: rotateZ(0.5turn)
    }
}

@keyframes bg {
    50% {
        background: #655
    }
}

/* 饼图：conic-gradient方案 */
.pie-conic-gradient {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(#655 40%, yellowgreen 0);
}



